<template>
    <div class="container">
        <h2>我的处罚</h2>

        <el-table :data="punishmentList" border style="width: 100%" v-loading="loading">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="reason" label="处罚原因" />
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="level" label="处罚等级" width="120" />
        </el-table>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import api from '../api/request'

const store = useStore()
const punishmentList = ref([])
const loading = ref(false)

onMounted(() => {
    fetchMyPunishments()
})

// 获取我的处罚记录
const fetchMyPunishments = async () => {
    loading.value = true
    try {
        // 实际项目中应该调用获取当前学生处罚的API
        // const res = await api.punishment.getMyPunishments(store.state.userInfo.id)

        // 模拟数据
        const mockData = [
            {
                id: 1,
                reason: '迟到',
                date: '2023-04-10',
                level: '警告'
            },
            {
                id: 2,
                reason: '违反宿舍规定',
                date: '2023-07-05',
                level: '严重警告'
            }
        ]

        punishmentList.value = mockData
    } catch (error) {
        console.error('获取处罚记录出错:', error)
        ElMessage.error('获取处罚记录失败')
    } finally {
        loading.value = false
    }
}
</script>

<style scoped>
.container {
    padding: 20px;
}
</style>